import React from 'react';
import {Table} from 'antd';
import axios from 'axios';
import PropTypes from 'prop-types';
import {setItem, getItem} from '../../utils/store';

class Grid extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            params:{},
            pagination: {
                showQuickJumper: true,
                showSizeChanger: true,
                pageSize: getItem("pageSize") ? parseInt(getItem("pageSize"), 10) : 10,
                current: 1,
                hideOnSinglePage: true
            },
            loading: false
        };
        this.handleTableChange = this.handleTableChange.bind(this);
    }

    // 通过父组件更新子组件props时触发
    componentWillReceiveProps(nextProps) {
        if (nextProps.refresh !== this.props.refresh) {
            let page = this.state.pagination.current;
            if (nextProps.params !== this.state.params) {
                page = 1;
                this.setState({
                    pagination: {
                        ...this.state.pagination,
                        current: 1
                    }
                });
            }
            this.fetch({
                pagecount: this.state.pagination.pageSize,
                page: page,
                ...nextProps.params
            });
        }
    }

    componentDidMount() {
        //表格样式定制化
        this.props.columns.forEach((item, index) => {
            if (!item.align) {
                item.align = 'center'
            }
            //操作权限
            // if(item.key==="operation"){
            //    console.log(item)
            // }
        });
        if (this.props.noFirstFech) {
            return;
        }
        this.fetch({
            pagecount: getItem("pageSize") ? parseInt(getItem("pageSize"), 10) : 10,
            page: 1,
            ...this.props.params
        });
    }

    // 表单change事件
    handleTableChange(pagination, filters, sorter) {
        // 用户改变每页条数时，记录到本地变量中
        if (this.state.pagination.pageSize !== pagination.pageSize) {
            setItem("pageSize", pagination.pageSize);
        }
        const pager = {...this.state.pagination, ...pagination};
        this.setState({
            pagination: pager,
        });
        this.fetch({
            pagecount: pagination.pageSize,
            page: pagination.current,
            ...this.props.params
        });
    }
    
        // 后台查询数据
        async fetch(params) {
        this.setState({
            loading: true,
        });
        console.log('params===>',params)
        try {
            const response=await this.props.fetchData(params);
            console.log('params',params)
            this.setState({
                loading: false,
                params:params
            },()=>{console.log('params',this.state.params)});
            // console.log('res',res);
            if (response&&response.data&&response.data.code==="200") {
                const res=response.data;
                if (typeof this.props.transformData === "function") {
                    res.data=this.props.transformData(res.data);
                }
                console.log(res)
                const pagination = {...this.state.pagination, total: res.pageLimit?res.pageLimit.totalCount:0};
                this.setState({
                    data: res.data,
                    pagination,
                });
            }
        } catch (e) {
            console.log(e);
        }
        // axios.post(this.props.url, {
        //     ...params
        // }).then(res => {
        //     this.setState({
        //         loading: false,
        //     });
        //     if (res&&res.code==200) {
        //         if (typeof this.props.transformData === "function") {
        //             res.data=this.props.transformData(res.data);
        //         }
        //         console.log(res)
        //         const pagination = {...this.state.pagination, total: res.pageLimit.totalCount};
        //         this.setState({
        //             data: res.data,
        //             pagination,
        //         });
        //     }
        // });
    }

    render() {
        return (
            <Table
                rowKey={record => record.id}
                size="middle"
                dataSource={this.state.data}
                pagination={this.state.pagination}
                loading={this.state.loading}
                onChange={this.handleTableChange}
                /*样式方面自定义*/
                // scroll={{x: this.state.width ? this.state.width : false}}
                {...this.props}
            />
        )
    }
}

Grid.propTypes = {
    params: PropTypes.object,
    transformData: PropTypes.func,
    columns: PropTypes.array,
}

export default Grid;